import {useEffect,useState,useMemo,If} from "react"
import {Table,Button,List,Input,message,Popconfirm} from "antd"
import { queryAssess,saveAssess,updateAssess ,removeAssess} from "../../../../utils/request/api"
export default ()=>{
    useEffect(()=>{
        getAssess(1,2)
    },[])
    let [assList,setAssList]=useState([])// 考核列表
    let [total,setTotal]=useState(0)// 总数

    const getAssess=(pageNum,pageSize)=>{// 获取考核
        queryAssess({pageNum,pageSize})
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                setAssList(res.data)
                setTotal(res.pages.total)
            }
        })
    }
    const sureDelAss=(id)=>{// 确认删除考核信息
        //  console.log(id);
        removeAssess({id})
        .then(res=>{
            if(res.meta.code==200){
                getAssess(1,2)
            }
        })
    }

    const renderAss=useMemo(()=>{
        const renderList=(data,val,id=0)=><List
        dataSource={data}
        renderItem={(v) => (
            <List.Item style={{
                justifyContent:"center"
            }}>
                
                <If isShow={val!="control"}>
                    <If isShow={!v.isadd && !v.isup}>{v[val]}</If>
                    <If isShow={v.isadd}>
                        <Input style={{maxWidth:"100px"}}
                         onChange={(e)=>{
                            // console.log(e.target.value);
                            // console.log(v);
                            v[val]=e.target.value
                            setAssList([...assList])
                         }} 
                         value={v[val]} />
                    </If>
                    <If isShow={v.isup}>
                        <Input style={{maxWidth:"100px"}}
                         onChange={(e)=>{
                            // console.log(e.target.value);
                            // console.log(v);
                            v[val]=e.target.value
                            setAssList([...assList])
                         }} 
                         value={v[val]} />
                    </If>
                </If>
                <If isShow={val=="control"}>
                    <If isShow={!v.isadd && !v.isup}>
                        
                    <Popconfirm
                      title="确认删除此条考核内容吗"
                      onConfirm={sureDelAss.bind(null,v.id)}
                      cancelText="取消"
                      okText="确认"
                    >
                       <Button size="small" type="danger">删除</Button>
                    </Popconfirm>

                        {/* <Button type="danger" size="small">删除</Button> */}
                        &nbsp;
                        &nbsp;
                        <Button
                        onClick={()=>{
                            console.log(v);
                            v.isup=true
                            setAssList([...assList])
                        }} 
                         type="primary" size="small">修改</Button>
                    </If>
                    <If isShow={v.isup}>
                    <Button type="primary" size="small"
                         onClick={()=>{
                            // console.log(v);
                            delete v.isup
                            // delete v.id
                            // v.positionId=id
                            // console.log(id);
                            console.log(v);
                            updateAssess(v)
                            .then(res=>{
                                if(res.meta.code==200){
                                    getAssess(1,2)
                                }
                            })
                         }}
                        >确认修改</Button>
                        &nbsp;
                        &nbsp;
                        <Button
                          onClick={()=>{
                            // console.log(data);
                            data.map((i,j)=>{
                                if(i.isup){
                                    // data.splice(j,1)
                                    delete i.isup
                                }
                            })
                            setAssList([...assList])
                          }}
                         type="" size="small">取消修改</Button>
                    </If>
                    <If isShow={v.isadd}>
                        <Button type="primary" size="small"
                         onClick={()=>{
                            // console.log(v);
                            delete v.isadd
                            v.positionId=id
                            // console.log(id);
                            console.log(v);
                            saveAssess(v)
                            .then(res=>{
                                if(res.meta.code==200){
                                    getAssess(1,2)
                                }
                            })
                         }}
                        >确认添加</Button>
                        &nbsp;
                        &nbsp;
                        <Button
                          onClick={()=>{
                            console.log(data);
                            data.map((i,j)=>{
                                if(i.isadd){
                                    data.splice(j,1)
                                }
                            })
                            setAssList([...assList])
                          }}
                         type="" size="small">取消添加</Button>
                    </If>
                </If>
            </List.Item>
          )}
        />
        const props={
            columns:[
                {
                    title:"职位",
                    dataIndex:"positionName",
                    key:"positionName"
                },
                {
                    title:"描述",
                    dataIndex:"describe",
                    key:"describe"
                },
                {
                    title:"考核",
                    children:[
                        {
                            title:"上域",
                            // dataIndex:"maxMark",
                            key:"maxMark",
                            render:(item)=>renderList(item.list,"maxMark")
                        },

                        {
                            title:"下域",
                            // dataIndex:"minMark",
                            key:"minMark",
                            render:(item)=>renderList(item.list,"minMark")
                        },
                        {
                            title:"等级",
                            // dataIndex:"minMark",
                            key:"countName",
                            render:(item)=>renderList(item.list,"countName")
                        },
                        {
                            title:"系数",
                            // dataIndex:"minMark",
                            key:"coefficient",
                            render:(item)=>renderList(item.list,"coefficient")
                        },
                        {
                            title:"操作",
                            // dataIndex:"minMark",
                            key:"coefficient",
                            render:(item)=>renderList(item.list,"control",item.id)
                        },

                    ]
                },
                {
                    title:"操作",
                    render:item=><>
                    <Button type="primary" onClick={()=>{
                        // console.log(item);
                        // 在添加之前先判断有没有添加的
                        let t=item.list.some(v=>v.isadd)
                        if(t){
                            message.warn('请先添加此条考核');
                            return
                        }
                        item.list.push({
                            maxMark:"",
                            minMark:"",
                            coefficient:"",
                            countName:'',
                            isadd:true
                        })

                        // 更新视图
                        setAssList([...assList])
                    }} >添加</Button>
                    </>
                }
            ],            
            dataSource:assList
        }
        return <Table {...props} bordered />
    },[assList])
    return <div>
        {renderAss}
    </div>
}